19. 路由参数的传递

路由参数的传递

方式1

src/pages/home/components.js

import { Link } from 'react-router-dom'  // 导入Link模块
......
<Link key={ index } to={ '/detail/' + item.get('id') }> // 拼接链接

src/App.js

<Route path='/detail/:id' exact component={ Detail }> </Route>

路由中需要使用一个字段来标识传递的参数，这里使用id

src/pages/detail/index.js

componentDidMount(){
		// this.props.match.params.id 获取的参数是在路由中传递的。不是？方式的
		this.props.getDetail(this.props.match.params.id)
	}

src/pages/detail/index.js

componentDidMount(){
		// this.props.match.params.id 获取的参数是在路由中传递的。不是？方式的
		this.props.getDetail(this.props.match.params.id)
	}

方式2

src/pages/home/components.js

import { Link } from 'react-router-dom'  // 导入Link模块
......
<Link key={ index } to={ '/detail?id=' + item.get('id') }> // 拼接链接

src/App.js

<Route path='/detail' exact component={ Detail }> </Route>

这种使用?传递的参数就不需要在路由使用标识来传递

src/pages/detail/index.js

componentDidMount(){
		// ？方式使用 this.props.localtion.search 获取相关参数，但不是直接能获取
}

在url中传递参数可以使用两种方式，一种是使其成为路由中的一部分，这种方式需要使用在路由中使用 :标识符 来表达，获取的时候使用 this.props.match.标识 来获取。另一种为使用 ? 的方式，这种方式不需要在路由中加入标识的字段，但是在获取的时候需要使用 this.props.localtion.search 来获取，且不能直接获取到。

代码地址